<template>
  <el-form
    ref="searchFormRef"
    :model="searchForm"
    :rules="searchRules"
    label-width="80px"
    class="demo-ruleForm"
    status-icon
  >
  <el-row>
    <el-col :span="10">
      <el-form-item label="标题搜索" prop="article_title">
        <el-input v-model="searchForm.article_title" @change="updateSearchParams" placeholder="请输入标题或草稿标题进行查找"/>
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item label="公众号" prop="official_account_id">
      <el-select v-model="searchForm.official_account_id" placeholder="请选择公众号" @click.native="clickSelect" @change="updateSearchParams">
        <el-option v-for="item in official_accounts" :key="item.id" :label="item.nick_name" :value="item.id" />
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="4">
      <div style="display:flex;justify-content: flex-end;">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-col>
  </el-row>

  </el-form>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import {getOfficeAccountList} from '@/api/channelconfig/officeAccount'

  const searchFormRef = ref<FormInstance>()
  
  interface SearchType {
    article_title: string,
    official_account_id: string
  }
  const searchForm = reactive<SearchType>({
    article_title: '',
    official_account_id: '',
  })

  const searchRules = reactive<FormRules>({
    article_title: [
      { required: false, message: '请输入标题搜索', trigger: 'blur' }
    ],
    official_account_id: [
      { required: false, message: '请选择公众号', trigger: 'blur' }
    ]
  })

  let official_accounts = reactive<any>([])

  interface Props {
    title: string
    id: string
  }
  const props = defineProps<Props>()
  const emit = defineEmits(['update:title', 'update:id', 'change'])
  const search = ()=>{
    updateSearchParams()
    emit('change', searchForm)
  }

  const reset = ()=>{
    searchForm.article_title = ''
    searchForm.official_account_id = ''
    updateSearchParams()
    emit('change', searchForm)
  }

  const clickSelect = async ()=>{
    let params = {
              page: 1,
              limit: 100,
              verify_type_info: 0
            }
    const res = await getOfficeAccountList(params)
    official_accounts.splice(0)
    official_accounts.push(...res.data)
  }

  const updateSearchParams = ()=>{
    emit('update:title', searchForm.article_title)
    emit('update:id', searchForm.official_account_id)
  }

</script>

<style lang="scss" scoped>
  .el-form-item{
    margin-bottom: 12px;
  }


</style>
